<template>
	<view :class="Visible ? 'usable-coupon open' : 'usable-coupon close'">
		<view class="popup-bg" @click="closePopup"></view>
		<view class="main" v-on:click.stop>
			<view class="close-btn" @click="closePopup"><text class="icon iconfont icon-guanbi"></text></view>
			<view class="main-tit">订单进度</view>
		<view class="box-top" v-for="(item,index) in dataArray" :key="index">
		
			<view class="line" :class="{active:item.active,none:index==(dataArray.length-1)}"><!-- 中线 -->
				<view class="dot" :class="{active:item.active}"></view> <!-- 圆点 -->
			</view>
		
			<view class="right-box-top" :class="{active:item.active,none:index==(dataArray.length-1)}"> <!-- 右边 -->
				<view class="tit f34">{{item.title}}</view>
				<view class="desc f28">{{item.content}}</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import Step from '@/components/Step.vue'
	export default {
		components:{
			Step
		},
		props: ['isCoupon', 'couponList', 'discount','detailData'],
		data() {
			return {
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*是否可见*/
				Visible: false,
				/*优惠券列表*/
				datalist: {},
				/*尺寸比例*/
				ratio: 1,
				dataArray:[{
					title:'0元下单',
					content: '使用「先用后付」付下单',
					active: true
				}, {
					title:'订单待发货',
					content: '暂无物流信息',
					active: false
				}, {
					title:'待订单完成后将自动扣款',
					content: `订单金额¥${this.detailData.payPrice}，将通过你的支付宝账户自动扣款`,
					active: false
				}]
			}
		},
		mounted() {
			this.init();
		},
		watch: {
			isCoupon: function(n, o) {
				if (n != o) {
					this.Visible = n;
					this.dataArray = [{
					title:'0元下单',
					content: '使用「先用后付」付下单',
					active: true
				}, {
					title:'订单待发货',
					content: '暂无物流信息',
					active: false
				}, {
					title:'待订单完成后将自动扣款',
					content: `订单金额¥${this.detailData.payPrice}，将通过你的支付宝账户自动扣款`,
					active: false
				}]
					// this.datalist = this.couponList;
					// this.getHeight();
				}
			}
		},
		methods: {
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						self.ratio = res.windowWidth / 750;
						self.getHeight();
					}
				});
			},
			/*获取高度*/
			getHeight() {
				// let count = Object.keys(this.couponList).length;
				// if (count > 2) {
				// 	this.scrollviewHigh = this.phoneHeight * 0.5;
				// } else {
				// 	if (count == 1) {
				// 		this.scrollviewHigh = 250 * this.ratio + 60;
				// 	} else if (count == 2) {
				// 		this.scrollviewHigh = 460 * this.ratio + 60;
				// 	}
				// }
			},
			
			/*关闭弹窗*/
			closePopup() {
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.close-btn {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		top: 0rpx;
		right: 30rpx;
	}
	.usable-coupon .popup-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
		height: 100vh;
		width: 100vw;
	}
	
	.usable-coupon .main {
		position: fixed;
		width: 100%;
		bottom: 0;
		min-height: 200rpx;
		max-height: 1200rpx;
		background-color: #fff;
		transform: translate3d(0, 980rpx, 0);
		transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 15rpx 15rpx 0 0;
		z-index: 99;
		padding: 80rpx 40rpx;
		box-sizing: border-box;
	}
	
	.usable-coupon .main {
		position: fixed;
		width: 100%;
		bottom: 0;
		min-height: 200rpx;
		// max-height: 900rpx;
		background-color: #fff;
		// transform: translate3d(0, 980rpx, 0);
		transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
		height: 60vh;
		z-index: 99;
	}
	
	.usable-coupon.open .main {
		transform: translate3d(0, 0, 0);
	}
	.usable-coupon.close .main{
		display: none;
	}
	.usable-coupon.close .popup-bg {
		display: none;
	}
	.main-tit{
		color: #333333;
		font-size: 48rpx;
		margin-bottom: 50rpx;
	}
.box-top {
		width: 100%;
		min-height: 120rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
 
		.left-box-top {
			width: 180rpx;
			text-align: center;
			color: rgba(198, 198, 198, 1);
			font-size: 20rpx;
		}
 
		.line {
			width: 4rpx;
			background-color: #999999;
			margin: 0 20rpx 0 20rpx;
 
			.dot {
				width: 20rpx;
				height: 20rpx;
				border: 1rpx solid #979797;
				background-color: #FFFFFF;
				border-radius: 50%;
				position: relative;
				left: -10rpx;
			}
		}
 
		.right-box-top {
			flex: 1;
			padding: 0 0 20rpx 0;
			margin-left: 20rpx;
			&.active{
				background-color: #fff !important;
				.tit{
					color: #1677ff;
					margin-bottom: 10rpx;
				}
			}
		}
	}
 
	//激活元素
	.active {
		background: #1677ff !important;
	}
 
	// 隐藏元素
	.none {
		background-color: rgba(0, 0, 0, 0) !important;
}
</style>
